<template>
    <div class="whitespace"
         v-bind:class="{
         'whitespace-mini' : size === 'mini',
         'whitespace-small' : size === 'small',
         'whitespace-normal' : size === 'normal',
         'whitespace-large' : size === 'large',}"/>
</template>

<script>
  export default {
    name: "WhiteSpace",
    props: {
      size: {
        type: String,
        default: "normal",
      },
    },
  }
</script>

<style scoped>
    .whitespace {
    }

    .whitespace-mini {
        height: 3px;
    }

    .whitespace-small {
        height: 6px;
    }

    .whitespace-normal {
        height: 9px;
    }

    .whitespace-large {
        height: 12px;
    }

</style>
